
class Mirror {
    constructor(el) {
        this.oBox = document.querySelector(el);
        this.oLeft1 = this.oBox.querySelector('.left1');
        this.oCover = this.oBox.querySelector('.cover');
        this.oLeftImg = this.oBox.querySelector('.left1 img');
        this.oRight = this.oBox.querySelector('.right');
        this.oRightImg = this.oBox.querySelector('.right img');


        this.boxLeft = this.oBox.offsetLeft;
        this.boxTop = this.oBox.offsetTop;
        this.r = this.oCover.offsetWidth / 2;

        this.max = this.oLeft1.clientWidth - this.r * 2;


        this.scale = (this.oRightImg.offsetWidth - this.oRight.clientWidth) / this.max;


        this.showEvent()

        this.mouseEvent()

    }

    // 鼠标移入移除
    showEvent() {
        this.oLeft1.onmouseover = () => {
            this.oCover.style.opacity = 1;
        }
        this.oLeft1.onmouseout = () => {
            this.oCover.style.opacity = 0;
        }
    }


    // 鼠标跟随
    mouseEvent() {
        this.oLeft1.onmousemove = e => {
            let x = e.x - this.boxLeft - this.r;
            let y = e.y - this.boxTop - this.r;
            if (x < 0) x = 0
            if (x > this.max) x = this.max;
            if (y < 0) y = 0
            if (y > this.max) y = this.max;

            // 
            this.oCover.style.left = x + 'px';
            this.oCover.style.top = y + 'px';


            // 右边的图片跟着移动
            this.oRightImg.style.left = - this.scale * x + 'px';
            this.oRightImg.style.top = -this.scale * y + 'px';


        }
    }



}
